<?php
use app\models\AsrAudioClassify;
use yii\helpers\Html;
use yii\widgets\ActiveForm;

$this->title = '';
//$this->params['breadcrumbs'][] = $this->title;

/* @var $this yii\web\View */
/* @var $model app\models\AsrAudio */
/* @var $form yii\widgets\ActiveForm */
?>

<link href="../assets/public/css/asr-audio/asr-audio.min.css" rel="stylesheet">
<link href="../assets/public/css/create.css" rel="stylesheet">
<link href="../assets/public/css/asr-audio/main.css" rel="stylesheet">
<link href="../assets/public/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../assets/public/js/vue.min.js"></script>

<header class="main-header" style="z-index:1; margin: -30px -15px;">
    <!--    话术流程导航   -->
    <nav class="navbar navbar-default " style="margin-left: 0px;background-color: #0071a6">
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
            <ul class="nav nav-pills nav-justified">
                <a style="color:white; margin: 15px;" id="back" class="pull-left"
                   href="index?page=<?php echo isset($_GET['page']) ? $_GET['page'] : 0; ?>&per-page=<?php echo isset($_GET['per-page']) ? $_GET['per-page'] : 0; ?>"><i
                            class="fa fa-backward"></i> 返回</a>
                <li class="" id="main-system"><a
                            href="update?id=<?php echo $id ?>&page=<?php echo isset($_GET['page']) ? $_GET['page'] : 0; ?>&per-page=<?php echo isset($_GET['per-page']) ? $_GET['per-page'] : 0; ?>"
                            class="dropdown-toggle" data-toggle="dropdown">主流程</a>
                </li>
                <li class="dropdown" id="profession">
                    <a href="profession?id=<?php echo $id ?>&page=<?php echo isset($_GET['page']) ? $_GET['page'] : 0; ?>&per-page=<?php echo isset($_GET['per-page']) ? $_GET['per-page'] : 0; ?>"
                       class="dropdown-toggle" data-toggle="dropdown" id="profession">业务流程</a>
                </li>
                <li class="dropdown" id="system-flow">
                    <a href="system?id=<?php echo $id ?>&page=<?php echo isset($_GET['page']) ? $_GET['page'] : 0; ?>&per-page=<?php echo isset($_GET['per-page']) ? $_GET['per-page'] : 0; ?>"
                       class="dropdown-toggle" data-toggle="dropdown" id="system">系统流程</a>
                </li>
                <li class="dropdown active" id="stop">
                    <a href="end?id=<?php echo $id ?>&page=<?php echo isset($_GET['page']) ? $_GET['page'] : 0; ?>&per-page=<?php echo isset($_GET['per-page']) ? $_GET['per-page'] : 0; ?>"
                       class="dropdown-toggle" data-toggle="dropdown">结束</a>
                </li>
            </ul>
        </div>
        <!-- /.container-fluid -->
    </nav>

</header>
<div id="all">
<div class="frame-body-box">

    <div class="frame-right-box">

        <div id="answerDetail" class="" style="display: block;margin-top: 45px">

            <div class="answerContent">
                <input id="id" type="hidden" value="<?=$id?>">
<!--                <form action="endsave?page=--><?php //echo isset($_GET['page'])?$_GET['page']:0; ?><!--&per-page=--><?php //echo isset($_GET['per-page'])?$_GET['per-page']:0; ?><!--" method="post" enctype="multipart/form-data">-->
                    <div id="answerDetail" style="display: block;">
                        <div class="answerContent" style="background-color: #ffffff">
                            <div class="title">
                                <div class="titlehs"><h4 style="color: #77b5fd;">话术设置</h4></div>
                            </div>
                            <div class="answerMain">
                                <div class="sonNav ansLeft">
                                        <div class="sonList">
                                            <ul style="list-style:none;" id="sonLeft">
                                                <li v-for="(value, key) in list"  v-bind:class="{current:key==i}">
                                                    <div class="sTit" style=""  @click="check"><p class="p" v-bind:data-key="value.keyword_classify_end_id" v-bind:data-k="key">{{value.name}}</p></div>
                                                </li>
                                            </ul>
                                        </div>
                                        <p class="sonAdd" @click="addNode">+ <span>添加</span></p>
                                    </div>
                                <div class="asrRight" id="asrRight" style="width: 730px;margin: 0px;
float: left;font-size: 14px;color: #666666;">
                                    <div class=" ">
                                        <div class="mBox" style="width: ">
                                            <div class="fmBox form-inline">
                                                <div class="form-group">
                                                    <label for="exampleInputName2" style="font-weight:normal">话术节点名称：</label>
                                                    <input type="text" name="nodename" class="form-control" autocomplete="off" value="" placeholder="" v-model="name"/>
                                                </div>
                                                <div class="form-group">
                                                    <label for="exampleInputName2" style="font-weight:normal">命中该标签意向分：</label>
                                                    <input type="text" class="form-control" name="score" autocomplete="off" id="exampleInputName2" placeholder="请输入分数" v-model="score">
                                                </div>
                                                <img src="../assets/public/img/asr-audio/reflect1.png" class="reflect">
                                            </div>
                                        </div>
                                        <div class="mBox" style="width: ">
                                            <div class="line" id="mainline"></div>
                                            <div style="height: 150px;" id="setting" v-for="(value, key) in content" class="setting">
                                                <div class="form-group" style="float:left;">
                                                    <lable>设置语音内容：</lable>
                                                    <textarea ref="input1" class="form-control" id="content" v-model="value.content" rows="4" style="width:300px;" :data-index="key"></textarea>
                                                </div>
                                                <div class="audio">
                                                    <audio id="audio" controls="controls" v-bind:src="value.filepath" class="voice" style="vertical-align: -24px;"></audio>
                                                    <button @click="deleteFile(value.files_id)" type="button" class="btn"><span>删除语音</span></button>
                                                </div>

                                                <div class="input-append" style="float:left;">
                                                    <form method="post" enctype="multipart/form-data">                                                               <button :id="value.files_id" @click="upload" type="button" class="el-button el-button--primary el-button--small" style="margin-left:300px;margin-top:20px;"><span :id="value.files_id"><img src="../assets/public/img/asr-audio/shangc.png" :id="value.files_id">上传语音</span>                                                               </button>                                                               <input id="upload_input" type="file" name="file" accept=".wav,.mp3" v-on:change="change(<?=$id?>,$event)" style="display:none"  value="" v-bind:index="key"  class="el-upload__input">
                                                    </form>
                                                </div>
                                            </div>


                                            <div class="btnRight">

                                                <div class="form-group" style="line-height: 40px; margin-top:20px; float:left">
                                                    <lable style="float:left;" style="float:left;">添加语音内容：</lable>
                                                    <div class="addAudioBtn" @click="add" id="addBtn">+</div>
                                                </div>
                                            </div>
                                            <img src="../assets/public/img/asr-audio/reflect3.png" class="reflect">
                                        </div>
                                        <div class="mBox" style="width:">
                                            <div class="flowBtns" style="">
                                                <button v-on:click="save" class="el-button el-button--primary"  id="mainbtn">
                                                    <span>保存</span>
                                                </button>
                                                &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
                                                <button v-if="isdel" id="maindel" class="btn btn-error" type="button" style="height: 40px;width: 160px;" @click="del">
                                                    <span>删除</span>
                                                </button>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        </div>
                    </div>
<!--                </form>-->

            </div>
        </div>
</div>

<!--  结束流程设置   -->
<script>
        $(function () {
//      主流程第一个节点默认选中
            //切换导航
            $('#navbar-collapse ul li').click(function () {
                $('#navbar-collapse ul li').removeClass('active');
                $(this).addClass('active');
                var href = $(this).children()[0].href;
                location.href = href;
            });
        });

        //vue.js
        var vm = new Vue({
            el:'#all',
            data:{
                list:[],
                name:'',
                score:'',
                content:[{content:'',name:'',file_id:'',audio_id:'',filepath:''}],
                i:0,
                isdel:false,
            },
            created:function () {
                this.nodename();//这里定义这个方法，vue实例之后运行到这里就调用这个函数
            },
            methods: {
                nodename: function () {
                    $.ajax({
                        type: 'post',
                        url: 'endpost',
                        data: {id: $('#id').val()},
                        success: function (data) {
                            var data = JSON.parse(data);
                            vm.list = data.mainSystem;
                            vm.keyword_classify_end_id = data.mainSystem[0].keyword_classify_end_id;
                            vm.name = data.mainSystem[0].name;
                            vm.score = data.mainSystem[0].intent_score;
                            if (data.file[0] != null) {
                                vm.content = data.file;
                            }
                            vm.result = data.result;
                        }
                    })
                },
                //切换
                check:function () {
                    let keyword_classify_end_id = $(event.target).attr('data-key');
                    let key = $(event.target).attr('data-k');
                    if(key>4){
                        vm.isdel = true;
                    }else{
                        vm.isdel = false;
                    }
                    $.ajax({
                        type:'post',
                        url:'endpost',
                        data:{id:$('#id').val(),keyword_classify_end_id:keyword_classify_end_id},
                        success:function (data) {
                            var res = JSON.parse(data);
                            if(res.Result=="success"){
                                vm.i = key;
                                vm.keyword_classify_end_id = res.Data.current.keyword_classify_end_id;
                                vm.name = res.Data.current.name;
                                vm.score = res.Data.current.intent_score;
                                if(res.Data.file[0] != null){
                                    vm.content = res.Data.file;
                                }else{
                                    vm.content = [{content:'',name:'',file_id:'',audio_id:'',filepath:''}];
                                }
                                vm.result = res.Data.result;
                            }else{
                                alert('切换失败');
                            }
                        }
                    })
                },
                upload:function (e) {
                    file_id = e.target.id
                    $('#upload_input').trigger('click');
                },
                change:function (audio_id) {
                    var index = parseInt($(event.target).attr("index"));
                    var upath = event.target.files[index];

                    var zipFormData = new FormData();
                    zipFormData.append('filename', upath);
                    zipFormData.append('file_id', file_id);
                    zipFormData.append('audio_id', audio_id);
                    zipFormData.append('keyword_classify_end_id', vm.keyword_classify_end_id);
                    $.ajax({
                        type:'post',
                        url:'endupload',
                        cache:false,
                        processData: false,
                        contentType : false,
                        data:zipFormData,
                        success:function (data) {
                            var res = JSON.parse(data);
                            if(res.Result=="success"){
                                vm.content = res.Data;
                                alert('上传成功');
                            }else{
                                alert('删除失败');
                            }
                        }
                    });
                },
                add:function () {
                    vm.content.push({content:null,name:null,file_id:null,audio_id:null,filepath:null});
                },
                //添加节点
                addNode: function () {
                    $.ajax({
                        type:'post',
                        url:'endadd',
                        data:{'audio_id':$('#id').val()},
                        success:function (data) {
                            var res = JSON.parse(data);
                            if(res.Result=="success"){
                                vm.list = res.Data;
                                alert('添加成功');
                            }else{
                                alert('添加失败');
                            }
                        }
                    })
                },

                //删除语音
                deleteFile: function (file_id){
                    $.ajax({
                        type:'post',
                        url:'enddelete',
                        data:{'file_id':file_id,'keyword_classify_end_id':vm.keyword_classify_end_id},
                        success:function (data) {
                            var res = JSON.parse(data);
                            console.res;
                            if(res.Result=="success"){
                                // console.log(res.Data)
                                if(res.Data[0] != null){
                                    vm.content = res.Data;
                                }else{
                                    vm.content = [{content:'',name:'',file_id:'',audio_id:'',filepath:''}];
                                    console.log(vm.content);
                                }
                                alert('删除成功');
                            }else{
                                alert('删除失败');
                            }
                        }
                    })

                },
                //保存
                save:function (event) {
                    let all = [];
                    for(let i=0; i<this.$refs.input1.length;i++){
                        all[i] = this.$refs.input1[i].value;
                    }
                    $.ajax({
                        type:'post',
                        url:'saveclassifyend',
                        data:{'id':$('#id').val(),'keyword_classify_end_id':vm.keyword_classify_end_id,'name':vm.name,'score':vm.score,'content':all},
                        success:function (data) {
                            var res = JSON.parse(data);
                            if(res.Result=="success"){
                                // console.log(res.Data);
                                vm.list = res.Data.mainSystem;
                                vm.keyword_classify_id = res.Data.current.keyword_classify_id;
                                vm.name = res.Data.current.name;
                                vm.score = res.Data.current.intent_score;
                                if(res.Data.file[0] != null){
                                    vm.content = res.Data.file;
                                }else{
                                    vm.content = [{content:'',name:'',file_id:'',audio_id:'',filepath:''}];
                                }
                                vm.result = res.Data.result;
                                alert('保存成功');
                            }else{
                                alert('保存失败');
                            }
                        }
                    })
                },
                //删除节点
                del:function () {
                    $.ajax({
                        type:'post',
                        url:'enddel',
                        data:{keyword_classify_end_id:vm.keyword_classify_end_id},
                        success:function (data) {
                            if(data==1){
                                location.reload();
                                alert('删除成功');
                            }else{
                                alert('删除失败');
                            }
                        }
                    })
                }
            }

        });
    </script>